<template>
  <view class="num">
    <view class="content">
      <view class="container">
        <view class="navs">
          <uni-icons type="person-filled" size="30" color="white"></uni-icons>
          <text class="text" style="font-size: 18px; color: white;">设备保养</text>
        </view>
        <view class="tab-bar" style="margin-top: 90rpx;background: #ffffff; width: 100%;">
          <view
            class="tab-item"
            :class="{active: currentTab === '待保养'}"
            @click="changeTab('待保养')"
          >
            待保养
          </view>
          <view
            class="tab-item"
            :class="{active: currentTab === '保养中'}"
            @click="changeTab('保养中')"
          >
            保养中
          </view>
          <view
            class="tab-item"
            :class="{active: currentTab === '已完成'}"
            @click="changeTab('已完成')"
          >
            已完成
          </view>
        </view>
        <view v-if="currentTab === '待保养'" class="tab-content">
          <view class="box" v-for="(item, index) in repairPendingList" :key="index">
            <text style="padding-top: 15rpx;">{{item.list}}</text><text class="box4" style="margin-left:415rpx; font-size: 15rpx; padding: 0px 15rpx; background-color: rgb(232, 58, 48)">待保养</text>
            <view style="padding-top: 15rpx;">地址: {{item.address}}</view>
            <view style="padding-top: 15rpx;">预定时间: {{item.scheduledTime}}</view>
          </view>
        </view>
        <view v-if="currentTab === '保养中'" class="tab-content">
          <view class="box" v-for="(item, index) in repairInProgressList" :key="index">
			        <text style="padding-top: 15rpx;">{{item.list}}</text><text class="box4" style="margin-left:415rpx; font-size: 15rpx; padding: 0px 15rpx; background-color: #f6ac00 ">保养中</text>
            <view style="padding-top: 15rpx;">地址: {{item.address}}</view>
            <view style="padding-top: ;">预定时间: {{item.scheduledTime}}</view>
          </view>
        </view>
        <view v-if="currentTab === '已完成'" class="tab-content">
          <view class="box" v-for="(item, index) in repairCompletedList" :key="index">
               <text style="padding-top: 15rpx;">{{item.list}}</text><text class="box4" style="margin-left:415rpx; font-size: 15rpx; padding: 0px 15rpx; background-color: #6da6ff ">已完成</text>
            <view style="padding-top: 15rpx;">地址: {{item.address}}</view>
            <view style="padding-top: 15rpx;">预定时间: {{item.scheduledTime}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: '待保养',
      // 模拟待维修数据
      repairPendingList: [
        {list: "芯片机器保养", address: "1车间-201设备", scheduledTime: "2024/3/30 13:00"},
        {list: "芯片机器保养", address: "1车间-101设备", scheduledTime: "2024/3/30 13:00"},
        {list: "芯片机器保养", address: "1车间-101设备", scheduledTime: "2024/3/30 13:00"}
      ],
      // 模拟维修中数据
      repairInProgressList: [
        {list: "芯片机器保养", address: "1车间-202设备", scheduledTime: "2024/3/31 10:00"},
        {list: "芯片机器保养", address: "1车间-102设备", scheduledTime: "2024/3/31 11:00"}
      ],
      // 模拟已完成数据
      repairCompletedList: [
        {list: "芯片机器保养", address: "1车间-401设备", scheduledTime: "2024/3/29 15:00"},
        {list: "芯片机器保养", address: "1车间-402设备", scheduledTime: "2024/3/29 16:00"},
		{list: "芯片机器保养", address: "1车间-102设备", scheduledTime: "2024/3/29 16:00"}
      ]
    };
  },
  methods: {
    changeTab(tab) {
      this.currentTab = tab;
    }
  }
};
</script>

<style>
		
	.box4{
		color: #ffffff;
		border-radius:12rpx ;
		padding-top:90rpx;
	}
.num {
  background: #ccc;
  width: 100%;
  height: 100vh;
}
.box {
  margin: 10px;
  border: none; /* 去掉白色边框，让整体更协调 */
  background-color: #ffffff; 
  border-radius:12rpx ;
}
.container {
  /* padding: 15rpx; */
}
.tab-bar {
  display: flex;
  justify-content: space-around;
  border-bottom: 1rpx solid #ccc;
}
.tab-item {
  padding: 10rpx 15rpx;
  cursor: pointer;
}
.active {
  color: #1aad19;
  border-bottom: 2rpx solid #1aad19;
}
.tab-content {
  margin-top: 15rpx;
}
.navs {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}
.text {
  margin-left: 10rpx;
}
</style>